/*
 * @Description:
 * @Autor: lcz
 * @Date: 2022-06-27 16:00:17
 * @LastEditors: lcz
 * @LastEditTime: 2022-06-27 16:35:28
 */
import { Timeline } from 'antd'
import styles from './scss/timeLine.module.less'
const { Item } = Timeline
export type Arrangement = 'left' | 'alternate' | 'right'

export interface TimeLineProps {
  data: Array<any>
  mode: Arrangement
  reverse?: boolean
  ghost?: string
}

const TimeLineComponent = (props: TimeLineProps) => {
  const iconShow = (str: string, index: number): object => {
    let result = {}
    switch (props.mode) {
      case 'left':
        result = { borderRight: `6px solid ${str}` }
        break
      case 'right':
        result = { borderLeft: `6px solid ${str}` }
        break
      case 'alternate':
        // index %2 == 1 奇偶数
        result = index %2 == 1 ?  { borderLeft: `6px solid ${str}` } : { borderRight: `6px solid ${str}` }
        break
    }
    return result
  }

  return (
    <div className={styles.timeLineBox}>
      <Timeline mode={props.mode} reverse={props?.reverse ?? false} pending={props.ghost}>
        {props.data.map((i, index) => (
          <Item label={i?.time} color={i?.colorStatus} key={index} dot={i?.dot}>
            <div className='flexTimeBox' data-background={i?.colorStatus ?? 'transparent'}>
              <div className={styles.timeLineItemTxt} style={{ background: i?.colorStatus ?? 'transparent' }}>
                {i.content}
                <i className='flexTimeBoxIcon' style={iconShow(i?.colorStatus ?? 'transparent', index)}></i>
              </div>
            </div>
          </Item>
        ))}
      </Timeline>
    </div>
  )
}
export default TimeLineComponent
